<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>问答筛选 - 知享社区</title>
    <!-- Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
    
    <style>
        :root {
            --primary: #3b82f6;
            --secondary: #8b5cf6;
            --success: #10b981;
            --warning: #f59e0b;
            --danger: #ef4444;
            --text-primary: #1e293b;
            --text-secondary: #64748b;
            --text-tertiary: #94a3b8;
            --bg-light: #f8fafc;
            --bg-white: #ffffff;
            --border-light: #e2e8f0;
            --radius: 10px;
            --shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
            background-color: var(--bg-light);
            color: var(--text-primary);
            padding-top: 56px;
            padding-bottom: 70px;
        }
        
        /* 顶部导航 */
        .top-nav {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            height: 56px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 16px;
            z-index: 1000;
            box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
            border-bottom: 1px solid var(--border-light);
        }
        
        .nav-title {
            font-size: 18px;
            font-weight: 600;
            color: var(--text-primary);
            text-align: center;
            flex: 1;
        }
        
        .nav-btn {
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            background: none;
            border: none;
            color: var(--text-secondary);
            font-size: 20px;
        }
        
        .nav-btn.primary {
            color: var(--primary);
        }
        
        /* 高级搜索区域 */
        .advanced-search {
            padding: 16px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
        }
        
        .search-row {
            display: flex;
            gap: 10px;
            margin-bottom: 12px;
        }
        
        .search-group {
            position: relative;
            flex: 1;
        }
        
        .search-input {
            width: 100%;
            padding: 12px 16px;
            border-radius: 8px;
            border: 1px solid var(--border-light);
            background-color: var(--bg-light);
            font-size: 14px;
            outline: none;
        }
        
        .search-input:focus {
            border-color: var(--primary);
        }
        
        .search-icon {
            position: absolute;
            right: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: var(--text-tertiary);
            font-size: 18px;
        }
        
        .search-button {
            width: 100%;
            padding: 12px;
            background-color: var(--primary);
            color: white;
            border: none;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 500;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        
        /* 筛选条件区域 */
        .filters-container {
            background-color: var(--bg-white);
            padding: 16px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .filter-section {
            margin-bottom: 16px;
        }
        
        .filter-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 12px;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .filter-title i {
            color: var(--primary);
        }
        
        /* 标签筛选 */
        .tag-filter {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
        }
        
        .filter-tag {
            padding: 6px 12px;
            border-radius: 20px;
            font-size: 13px;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
            white-space: nowrap;
            cursor: pointer;
            transition: all 0.2s ease;
        }
        
        .filter-tag.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 日期筛选 */
        .date-filter {
            display: flex;
            gap: 8px;
        }
        
        .date-option {
            flex: 1;
            padding: 8px;
            text-align: center;
            border-radius: 8px;
            font-size: 14px;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
            cursor: pointer;
        }
        
        .date-option.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 状态筛选 */
        .status-filter {
            display: flex;
            gap: 8px;
        }
        
        .status-option {
            flex: 1;
            padding: 8px;
            text-align: center;
            border-radius: 8px;
            font-size: 14px;
            background-color: var(--bg-light);
            color: var(--text-secondary);
            border: 1px solid var(--border-light);
            cursor: pointer;
        }
        
        .status-option.active {
            background-color: var(--primary);
            color: white;
            border-color: var(--primary);
        }
        
        /* 筛选操作栏 */
        .filter-actions {
            display: flex;
            gap: 12px;
            padding: 12px 16px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
        }
        
        .filter-btn {
            flex: 1;
            padding: 10px;
            border-radius: 8px;
            font-size: 15px;
            font-weight: 500;
            text-align: center;
            border: none;
        }
        
        .filter-btn.reset {
            background-color: var(--bg-light);
            color: var(--text-secondary);
        }
        
        .filter-btn.apply {
            background-color: var(--primary);
            color: white;
        }
        
        /* 结果统计 */
        .results-stats {
            padding: 12px 16px;
            background-color: var(--bg-white);
            border-bottom: 1px solid var(--border-light);
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .stats-text {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .sort-options {
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .sort-label {
            font-size: 14px;
            color: var(--text-secondary);
        }
        
        .sort-select {
            background: none;
            border: none;
            color: var(--primary);
            font-size: 14px;
            font-weight: 500;
            padding-right: 20px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='6' viewBox='0 0 12 6'%3E%3Cpath fill='%233b82f6' d='M6 6L0 0h12L6 6z'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right center;
            outline: none;
        }
        
        /* 问答列表容器 */
        .questions-container {
            padding: 12px 16px;
        }
        
        /* 问答卡片通用样式 */
        .question-card {
            background-color: var(--bg-white);
            border-radius: var(--radius);
            box-shadow: var(--shadow);
            margin-bottom: 12px;
            overflow: hidden;
            transition: transform 0.15s ease;
        }
        
        .question-card:hover {
            transform: translateY(-1px);
        }
        
        .question-header {
            padding: 12px 16px;
            display: flex;
            align-items: center;
            gap: 10px;
            border-bottom: 1px solid var(--border-light);
        }
        
        .question-avatar {
            width: 36px;
            height: 36px;
            border-radius: 50%;
            object-fit: cover;
        }
        
        .question-author {
            flex: 1;
        }
        
        .author-name {
            font-size: 14px;
            font-weight: 600;
            margin-bottom: 1px;
        }
        
        .question-time {
            font-size: 12px;
            color: var(--text-tertiary);
        }
        
        .question-menu {
            color: var(--text-tertiary);
            background: none;
            border: none;
            font-size: 16px;
        }
        
        .question-content {
            padding: 16px;
        }
        
        .question-title {
            font-size: 16px;
            font-weight: 600;
            margin-bottom: 8px;
            line-height: 1.4;
        }
        
        .question-text {
            font-size: 14px;
            color: var(--text-secondary);
            line-height: 1.5;
            margin-bottom: 12px;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }
        
        /* 问答标签 */
        .question-tags {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            margin-bottom: 12px;
        }
        
        .question-tag {
            padding: 2px 8px;
            border-radius: 4px;
            font-size: 12px;
            background-color: rgba(59, 130, 246, 0.1);
            color: var(--primary);
        }
        
        /* 无图问答样式 */
        .question-no-image .question-content {
            padding-bottom: 0;
        }
        
        /* 单图问答样式 */
        .question-single-image .question-image {
            width: 100%;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .question-single-image .question-image img {
            width: 100%;
            height: 180px;
            object-fit: cover;
        }
        
        /* 多图问答样式 */
        .question-multi-image .question-images {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 4px;
            border-radius: 6px;
            overflow: hidden;
            margin-bottom: 12px;
        }
        
        .question-multi-image .question-image {
            aspect-ratio: 1/1;
            overflow: hidden;
        }
        
        .question-multi-image .question-image img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        
        /* 问答底部信息 */
        .question-footer {
            padding: 0 16px 16px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        
        .question-stats {
            display: flex;
            gap: 16px;
            font-size: 13px;
            color: var(--text-tertiary);
        }
        
        .question-stat {
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .question-actions {
            display: flex;
            gap: 12px;
        }
        
        .question-action {
            color: var(--text-tertiary);
            background: none;
            border: none;
            font-size: 13px;
            display: flex;
            align-items: center;
            gap: 4px;
        }
        
        .question-action.liked {
            color: var(--danger);
        }
        
        /* 已解决标记 */
        .solved-badge {
            position: absolute;
            top: 12px;
            right: 12px;
            padding: 2px 8px;
            border-radius: 12px;
            font-size: 12px;
            font-weight: 500;
            background-color: var(--success);
            color: white;
        }
        
        /* 底部导航 */
        .bottom-nav {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            height: 70px;
            background-color: var(--bg-white);
            display: flex;
            justify-content: space-around;
            align-items: center;
            border-top: 1px solid var(--border-light);
            z-index: 1000;
        }
        
        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            color: var(--text-tertiary);
            font-size: 11px;
            gap: 4px;
            text-decoration: none;
            flex: 1;
        }
        
        .nav-item.active {
            color: var(--primary);
        }
        
        .nav-icon {
            font-size: 22px;
        }
        
        /* 浮动提问按钮 */
        .fab-ask {
            position: fixed;
            right: 24px;
            bottom: 86px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            background-color: var(--primary);
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
            border: none;
            font-size: 24px;
            z-index: 999;
        }
        
        /* 提示消息 */
        .toast {
            position: fixed;
            bottom: 90px;
            left: 50%;
            transform: translateX(-50%);
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            padding: 8px 16px;
            border-radius: 6px;
            z-index: 9999;
            font-size: 14px;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        
        .toast.show {
            opacity: 1;
        }
        
        /* 加载更多 */
        .load-more {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            background-color: var(--bg-white);
            border: 1px solid var(--border-light);
            color: var(--text-primary);
            font-size: 15px;
            margin-top: 8px;
        }
        
        /* 筛选器折叠/展开 */
        .filter-toggle {
            background: none;
            border: none;
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            color: var(--text-secondary);
            padding: 8px;
            font-size: 14px;
        }
        
        .filter-panel {
            transition: max-height 0.3s ease, padding 0.3s ease;
            overflow: hidden;
        }
        
        .filter-panel.collapsed {
            max-height: 0;
            padding: 0;
            border: none;
        }
    </style>
</head>
<body>
    <!-- 顶部导航 -->
    <div class="top-nav">
        <button class="nav-btn" id="backBtn">
            <i class="fas fa-arrow-left"></i>
        </button>
        <div class="nav-title">问答筛选</div>
        <button class="nav-btn primary" id="filterToggleBtn">
            <i class="fas fa-sliders"></i>
        </button>
    </div>
    
    <!-- 高级搜索区域 -->
    <div class="advanced-search">
        <div class="search-row">
            <div class="search-group">
                <input type="text" class="search-input" placeholder="关键词搜索...">
                <i class="fas fa-search search-icon"></i>
            </div>
        </div>
        <div class="search-row">
            <div class="search-group">
                <input type="text" class="search-input" placeholder="按用户搜索...">
                <i class="fas fa-user search-icon"></i>
            </div>
            <div class="search-group">
                <input type="text" class="search-input" placeholder="按标签搜索...">
                <i class="fas fa-tag search-icon"></i>
            </div>
        </div>
        <button class="search-button">
            <i class="fas fa-search"></i>
            <span>搜索问答</span>
        </button>
    </div>
    
    <!-- 筛选器折叠按钮 -->
    <button class="filter-toggle" id="filterCollapseBtn">
        <i class="fas fa-chevron-up" id="filterChevron"></i>
        <span>筛选条件</span>
    </button>
    
    <!-- 筛选条件区域 -->
    <div class="filter-panel" id="filterPanel">
        <div class="filters-container">
            <!-- 分类筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <i class="fas fa-folder"></i>
                    <span>问答分类</span>
                </div>
                <div class="tag-filter">
                    <div class="filter-tag active">全部</div>
                    <div class="filter-tag">技术开发</div>
                    <div class="filter-tag">生活常识</div>
                    <div class="filter-tag">学习教育</div>
                    <div class="filter-tag">职场工作</div>
                    <div class="filter-tag">兴趣爱好</div>
                    <div class="filter-tag">健康医疗</div>
                    <div class="filter-tag">财经理财</div>
                    <div class="filter-tag">情感心理</div>
                </div>
            </div>
            
            <!-- 日期筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <i class="fas fa-calendar"></i>
                    <span>发布时间</span>
                </div>
                <div class="date-filter">
                    <div class="date-option active">全部时间</div>
                    <div class="date-option">今天</div>
                    <div class="date-option">本周</div>
                    <div class="date-option">本月</div>
                </div>
            </div>
            
            <!-- 状态筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <i class="fas fa-check-circle"></i>
                    <span>问答状态</span>
                </div>
                <div class="status-filter">
                    <div class="status-option active">全部状态</div>
                    <div class="status-option">已解决</div>
                    <div class="status-option">未解决</div>
                </div>
            </div>
            
            <!-- 热门程度筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <i class="fas fa-fire"></i>
                    <span>热门程度</span>
                </div>
                <div class="tag-filter">
                    <div class="filter-tag active">全部</div>
                    <div class="filter-tag">高浏览</div>
                    <div class="filter-tag">高回复</div>
                    <div class="filter-tag">高点赞</div>
                </div>
            </div>
            
            <!-- 内容类型筛选 -->
            <div class="filter-section">
                <div class="filter-title">
                    <i class="fas fa-image"></i>
                    <span>内容类型</span>
                </div>
                <div class="tag-filter">
                    <div class="filter-tag active">全部内容</div>
                    <div class="filter-tag">含图片</div>
                    <div class="filter-tag">纯文字</div>
                </div>
            </div>
        </div>
        
        <!-- 筛选操作栏 -->
        <div class="filter-actions">
            <button class="filter-btn reset" id="resetFilterBtn">重置筛选</button>
            <button class="filter-btn apply" id="applyFilterBtn">应用筛选</button>
        </div>
    </div>
    
    <!-- 结果统计 -->
    <div class="results-stats">
        <div class="stats-text">找到 <span class="results-count">28</span> 个符合条件的问答</div>
        <div class="sort-options">
            <span class="sort-label">排序：</span>
            <select class="sort-select" id="sortSelect">
                <option value="hot">热门优先</option>
                <option value="newest">最新发布</option>
                <option value="mostReply">最多回复</option>
                <option value="mostLike">最多点赞</option>
            </select>
        </div>
    </div>
    
    <!-- 问答列表容器 -->
    <div class="questions-container">
        <!-- 无图问答 -->
        <div class="question-card question-no-image" style="position: relative;">
            <div class="solved-badge">已解决</div>
            <div class="question-header">
                <img src="https://picsum.photos/id/64/100/100" alt="提问者头像" class="question-avatar">
                <div class="question-author">
                    <div class="author-name">前端开发工程师</div>
                    <div class="question-time">2天前</div>
                </div>
                <button class="question-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="question-content">
                <h3 class="question-title">React和Vue在大型项目中哪个更有优势？</h3>
                <p class="question-text">
                    最近公司准备启动一个大型电商平台项目，技术选型上在React和Vue之间犹豫。团队成员两种技术都有使用经验，想了解在大型项目中，这两个框架各有什么优势和劣势？
                </p>
                
                <div class="question-tags">
                    <span class="question-tag">React</span>
                    <span class="question-tag">Vue</span>
                    <span class="question-tag">前端框架</span>
                </div>
            </div>
            
            <div class="question-footer">
                <div class="question-stats">
                    <div class="question-stat">
                        <i class="far fa-eye"></i> 1.2k
                    </div>
                    <div class="question-stat">
                        <i class="far fa-comment"></i> 32
                    </div>
                </div>
                <div class="question-actions">
                    <button class="question-action liked">
                        <i class="fas fa-thumbs-up"></i> 86
                    </button>
                    <button class="question-action">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 单图问答 -->
        <div class="question-card question-single-image">
            <div class="question-header">
                <img src="https://picsum.photos/id/91/100/100" alt="提问者头像" class="question-avatar">
                <div class="question-author">
                    <div class="author-name">摄影爱好者</div>
                    <div class="question-time">3天前</div>
                </div>
                <button class="question-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="question-content">
                <h3 class="question-title">这张照片的光影效果如何改进？请各位大师指点</h3>
                <p class="question-text">
                    周末在郊外拍摄的风景照，总觉得光影效果不够理想，天空和地面的曝光很难平衡。想请教各位摄影爱好者，这种场景应该如何设置相机参数？
                </p>
                
                <div class="question-image">
                    <img src="https://picsum.photos/id/29/600/400" alt="问题图片">
                </div>
                
                <div class="question-tags">
                    <span class="question-tag">摄影</span>
                    <span class="question-tag">光影</span>
                    <span class="question-tag">后期处理</span>
                </div>
            </div>
            
            <div class="question-footer">
                <div class="question-stats">
                    <div class="question-stat">
                        <i class="far fa-eye"></i> 856
                    </div>
                    <div class="question-stat">
                        <i class="far fa-comment"></i> 18
                    </div>
                </div>
                <div class="question-actions">
                    <button class="question-action">
                        <i class="far fa-thumbs-up"></i> 42
                    </button>
                    <button class="question-action">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 多图问答 -->
        <div class="question-card question-multi-image">
            <div class="question-header">
                <img src="https://picsum.photos/id/22/100/100" alt="提问者头像" class="question-avatar">
                <div class="question-author">
                    <div class="author-name">美食达人</div>
                    <div class="question-time">1天前</div>
                </div>
                <button class="question-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="question-content">
                <h3 class="question-title">自制披萨总是失败，哪里出了问题？附制作过程图</h3>
                <p class="question-text">
                    尝试在家自制披萨，但成品总是不如外面的好吃。饼底要么太硬要么太软，芝士也不容易融化拉丝。附上制作过程中的几张图片，想请各位大神帮忙看看哪里出了问题？
                </p>
                
                <div class="question-images">
                    <div class="question-image">
                        <img src="https://picsum.photos/id/292/300/300" alt="问题图片1">
                    </div>
                    <div class="question-image">
                        <img src="https://picsum.photos/id/431/300/300" alt="问题图片2">
                    </div>
                    <div class="question-image">
                        <img src="https://picsum.photos/id/488/300/300" alt="问题图片3">
                    </div>
                </div>
                
                <div class="question-tags">
                    <span class="question-tag">美食</span>
                    <span class="question-tag">烘焙</span>
                    <span class="question-tag">披萨</span>
                </div>
            </div>
            
            <div class="question-footer">
                <div class="question-stats">
                    <div class="question-stat">
                        <i class="far fa-eye"></i> 632
                    </div>
                    <div class="question-stat">
                        <i class="far fa-comment"></i> 24
                    </div>
                </div>
                <div class="question-actions">
                    <button class="question-action">
                        <i class="far fa-thumbs-up"></i> 36
                    </button>
                    <button class="question-action">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 无图问答 -->
        <div class="question-card question-no-image">
            <div class="question-header">
                <img src="https://picsum.photos/id/45/100/100" alt="提问者头像" class="question-avatar">
                <div class="question-author">
                    <div class="author-name">职场新人</div>
                    <div class="question-time">4天前</div>
                </div>
                <button class="question-menu">
                    <i class="fas fa-ellipsis-h"></i>
                </button>
            </div>
            
            <div class="question-content">
                <h3 class="question-title">如何有效管理远程工作的时间和效率？</h3>
                <p class="question-text">
                    公司开始实行混合办公模式，每周有2-3天可以远程工作。但在家工作时总是容易分心，效率不高，而且很难区分工作和生活的边界。
                </p>
                
                <div class="question-tags">
                    <span class="question-tag">远程工作</span>
                    <span class="question-tag">时间管理</span>
                    <span class="question-tag">职场</span>
                </div>
            </div>
            
            <div class="question-footer">
                <div class="question-stats">
                    <div class="question-stat">
                        <i class="far fa-eye"></i> 945
                    </div>
                    <div class="question-stat">
                        <i class="far fa-comment"></i> 47
                    </div>
                </div>
                <div class="question-actions">
                    <button class="question-action liked">
                        <i class="fas fa-thumbs-up"></i> 128
                    </button>
                    <button class="question-action">
                        <i class="far fa-bookmark"></i> 收藏
                    </button>
                </div>
            </div>
        </div>
        
        <!-- 加载更多 -->
        <button class="load-more" id="loadMoreBtn">加载更多问答</button>
    </div>
    
    <!-- 浮动提问按钮 -->
    <button class="fab-ask" id="askBtn">
        <i class="fas fa-plus"></i>
    </button>
    
    <!-- 底部导航 -->
    <div class="bottom-nav">
        <a href="#" class="nav-item">
            <i class="fas fa-home nav-icon"></i>
            <span>首页</span>
        </a>
        <a href="#" class="nav-item active">
            <i class="fas fa-question-circle nav-icon"></i>
            <span>问答</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-compass nav-icon"></i>
            <span>发现</span>
        </a>
        <a href="#" class="nav-item">
            <i class="fas fa-user nav-icon"></i>
            <span>我的</span>
        </a>
    </div>
    
    <!-- 提示消息 -->
    <div class="toast" id="toast"></div>
    
    <!-- 问答操作菜单 -->
    <div class="modal fade" id="questionMenuModal" tabindex="-1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body p-0">
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-share-alt me-2"></i> 分享问答
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-bookmark me-2"></i> 收藏问答
                    </button>
                    <button class="btn w-100 text-start px-4 py-3 border-0" style="font-size: 15px;">
                        <i class="fas fa-report me-2"></i> 举报问题
                    </button>
                </div>
            </div>
        </div>
    </div>
    
    <!-- Bootstrap JS Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
    
    <script>
        // DOM元素
        const backBtn = document.getElementById('backBtn');
        const filterToggleBtn = document.getElementById('filterToggleBtn');
        const filterCollapseBtn = document.getElementById('filterCollapseBtn');
        const filterChevron = document.getElementById('filterChevron');
        const filterPanel = document.getElementById('filterPanel');
        const resetFilterBtn = document.getElementById('resetFilterBtn');
        const applyFilterBtn = document.getElementById('applyFilterBtn');
        const sortSelect = document.getElementById('sortSelect');
        const askBtn = document.getElementById('askBtn');
        const filterTags = document.querySelectorAll('.filter-tag');
        const dateOptions = document.querySelectorAll('.date-option');
        const statusOptions = document.querySelectorAll('.status-option');
        const questionMenus = document.querySelectorAll('.question-menu');
        const questionActions = document.querySelectorAll('.question-action');
        const loadMoreBtn = document.getElementById('loadMoreBtn');
        const toast = document.getElementById('toast');
        const questionMenuModal = new bootstrap.Modal(document.getElementById('questionMenuModal'));
        const searchInputs = document.querySelectorAll('.search-input');
        const questionCards = document.querySelectorAll('.question-card');
        const resultsCount = document.querySelector('.results-count');
        
        // 显示提示消息
        function showToast(message) {
            toast.textContent = message;
            toast.classList.add('show');
            
            clearTimeout(toast.timeout);
            toast.timeout = setTimeout(() => {
                toast.classList.remove('show');
            }, 2000);
        }
        
        // 切换筛选面板折叠状态
        function toggleFilterPanel() {
            filterPanel.classList.toggle('collapsed');
            
            if (filterPanel.classList.contains('collapsed')) {
                filterChevron.classList.remove('fa-chevron-up');
                filterChevron.classList.add('fa-chevron-down');
            } else {
                filterChevron.classList.remove('fa-chevron-down');
                filterChevron.classList.add('fa-chevron-up');
            }
        }
        
        // 重置所有筛选条件
        function resetAllFilters() {
            // 重置标签筛选
            document.querySelectorAll('.filter-tag').forEach(tag => {
                tag.classList.remove('active');
                if (tag.textContent === '全部' || tag.textContent === '全部内容') {
                    tag.classList.add('active');
                }
            });
            
            // 重置日期筛选
            dateOptions.forEach(option => {
                option.classList.remove('active');
                if (option.textContent === '全部时间') {
                    option.classList.add('active');
                }
            });
            
            // 重置状态筛选
            statusOptions.forEach(option => {
                option.classList.remove('active');
                if (option.textContent === '全部状态') {
                    option.classList.add('active');
                }
            });
            
            // 重置搜索框
            searchInputs.forEach(input => {
                input.value = '';
            });
            
            // 重置排序
            sortSelect.value = 'hot';
            
            showToast('已重置所有筛选条件');
        }
        
        // 应用筛选条件
        function applyFilters() {
            // 收集所有选中的筛选条件
            const activeFilters = [];
            
            // 收集标签筛选
            document.querySelectorAll('.filter-tag.active').forEach(tag => {
                activeFilters.push(tag.textContent);
            });
            
            // 收集日期筛选
            dateOptions.forEach(option => {
                if (option.classList.contains('active')) {
                    activeFilters.push(option.textContent);
                }
            });
            
            // 收集状态筛选
            statusOptions.forEach(option => {
                if (option.classList.contains('active')) {
                    activeFilters.push(option.textContent);
                }
            });
            
            // 显示应用结果
            showToast(`已应用 ${activeFilters.length} 个筛选条件`);
            
            // 这里可以添加实际筛选逻辑，根据条件过滤问答列表
            // 模拟筛选结果数量变化
            const newCount = Math.floor(Math.random() * 30) + 5;
            resultsCount.textContent = newCount;
            
            // 收起筛选面板
            if (!filterPanel.classList.contains('collapsed')) {
                toggleFilterPanel();
            }
        }
        
        // 绑定事件
        function bindEvents() {
            // 返回按钮
            backBtn.addEventListener('click', () => {
                history.back();
                showToast('返回上一页');
            });
            
            // 筛选面板折叠/展开
            filterCollapseBtn.addEventListener('click', toggleFilterPanel);
            filterToggleBtn.addEventListener('click', toggleFilterPanel);
            
            // 重置筛选
            resetFilterBtn.addEventListener('click', resetAllFilters);
            
            // 应用筛选
            applyFilterBtn.addEventListener('click', applyFilters);
            
            // 排序选择
            sortSelect.addEventListener('change', function() {
                const sortTypes = {
                    'hot': '热门优先',
                    'newest': '最新发布',
                    'mostReply': '最多回复',
                    'mostLike': '最多点赞'
                };
                showToast(`已按${sortTypes[this.value]}排序`);
            });
            
            // 提问按钮
            askBtn.addEventListener('click', () => {
                showToast('进入提问页面');
            });
            
            // 标签筛选点击
            filterTags.forEach(tag => {
                tag.addEventListener('click', function() {
                    // 找到同一组的其他标签并移除active类
                    const parent = this.parentElement;
                    parent.querySelectorAll('.filter-tag').forEach(sibling => {
                        sibling.classList.remove('active');
                    });
                    // 为当前标签添加active类
                    this.classList.add('active');
                });
            });
            
            // 日期筛选点击
            dateOptions.forEach(option => {
                option.addEventListener('click', function() {
                    dateOptions.forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 状态筛选点击
            statusOptions.forEach(option => {
                option.addEventListener('click', function() {
                    statusOptions.forEach(opt => opt.classList.remove('active'));
                    this.classList.add('active');
                });
            });
            
            // 问答操作菜单
            questionMenus.forEach(menu => {
                menu.addEventListener('click', function(e) {
                    e.stopPropagation();
                    questionMenuModal.show();
                });
            });
            
            // 问答操作按钮（点赞、收藏）
            questionActions.forEach(action => {
                action.addEventListener('click', function(e) {
                    e.stopPropagation();
                    const icon = this.querySelector('i');
                    
                    // 点赞功能
                    if (icon.classList.contains('fa-thumbs-up')) {
                        if (this.classList.contains('liked')) {
                            this.classList.remove('liked');
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            const count = parseInt(this.textContent.trim().split(' ')[1]);
                            this.innerHTML = '<i class="far fa-thumbs-up"></i> ' + (count - 1);
                            showToast('已取消点赞');
                        } else {
                            this.classList.add('liked');
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            const count = parseInt(this.textContent.trim().split(' ')[1]);
                            this.innerHTML = '<i class="fas fa-thumbs-up"></i> ' + (count + 1);
                            showToast('点赞成功');
                        }
                    }
                    // 收藏功能
                    else if (icon.classList.contains('fa-bookmark')) {
                        if (icon.classList.contains('far')) {
                            icon.classList.remove('far');
                            icon.classList.add('fas');
                            this.textContent = ' 已收藏';
                            this.prepend(icon);
                            showToast('收藏成功');
                        } else {
                            icon.classList.remove('fas');
                            icon.classList.add('far');
                            this.textContent = ' 收藏';
                            this.prepend(icon);
                            showToast('已取消收藏');
                        }
                    }
                });
            });
            
            // 点击问答卡片进入详情
            questionCards.forEach(card => {
                card.addEventListener('click', function() {
                    const questionTitle = this.querySelector('.question-title').textContent;
                    showToast(`查看问答: ${questionTitle.substring(0, 10)}...`);
                });
            });
            
            // 搜索功能
            searchInputs.forEach(input => {
                input.addEventListener('keyup', function(e) {
                    if (e.key === 'Enter') {
                        const searchText = this.value.trim();
                        if (searchText) {
                            showToast(`搜索: ${searchText}`);
                        }
                    }
                });
            });
            
            // 搜索按钮
            document.querySelector('.search-button').addEventListener('click', function() {
                const keyword = document.querySelector('.search-input[placeholder="关键词搜索..."]').value.trim();
                if (keyword) {
                    showToast(`搜索关键词: ${keyword}`);
                    // 模拟搜索结果数量变化
                    const newCount = Math.floor(Math.random() * 20) + 1;
                    resultsCount.textContent = newCount;
                } else {
                    showToast('请输入搜索关键词');
                }
            });
            
            // 加载更多
            loadMoreBtn.addEventListener('click', function() {
                this.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 加载中...';
                setTimeout(() => {
                    this.textContent = '加载更多问答';
                    showToast('已加载更多问答');
                }, 1500);
            });
        }
        
        // 初始化
        function init() {
            bindEvents();
        }
        
        // 启动
        init();
    </script>
</body>
</html>
